<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body { 
        background-image: url("picture/th.jpg");
        background-repeat: no-repeat;
        background-position: top;
        background-attachment: fixed;
    }
    .one {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-top: 11px;
        margin-left: 190px;
        /*background-color: blue;*/
    }
    .two {
        display: inline-block;
        width: 150px;
        height: 25px;
        margin-left: 2px;
        font-family: "微软雅黑";
        font-size: 20px;
        color: #fff;
        /*background-color: red;*/
    }
    .header {
            display: inline-block;
            margin-left: 60px;
            width: 465.750px;
            height: 31.198px;
            /* float: left; */
        }
    .header li {
            float: left;
            list-style-type: none;
            
        }
    .header li a {
            text-decoration: none;
            font-size: 14px;
            color: #FFFFFFCC;
            width: 40px;
            height: 39px;
            margin-right: 36px;
            margin-top: 15px;
            cursor: pointer;
        }
    .header a:hover {
            color: white;
        }
    .login {
        display: inline-block;
        font-size: 14px;
        color: #fff;
        margin-left: 320px;
  
    }
    .icon {
        display: inline-block;
        width: 25px;
        height: 25px;
    }
    .other {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-left: 40px;
    }
    .inland {
        display: inline;
        line-height: 26px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        padding: 6px 14px 5px 14px;
        font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif;
        margin-left: 500px;
        margin-top: 50px;
        width: 48px;
        height: 26px;
        background-color: #fff;
        border-radius: 24px;
        color: #010101;
        cursor: auto;
    }
    .inter {
        display: inline-block;
        line-height: 26px;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
        padding: 6px 14px 5px 14px;
        font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif;
        margin-left: 1px;
        margin-top: 50px;
        width: 48px;
        height: 26px;
        color: #666;
        background-color: rgba(255,255,255,.75);
        border-radius: 24px; 
        cursor: auto;
    }
    .search {
        line-height: 26px;
        font-size: 16px;
        cursor: pointer;
        padding: 6px 14px 5px 14px;
        margin-left: 450px;
        margin-top: 1px;
        width: 500px;
        height: 40px;
        background-color: #fff;
        border-radius: 24px; 
        cursor: auto;
    }
    .search img {
        float: right;
    }
    .bot {
        display: inline-block;
    }
    .bot .four {
        display: inline-block;
        width: 200px;
        height: 40px;
        border-radius: 5px;
        margin-top: 430px;
        margin-left: 1150px;
        background-color: rgb(33, 32, 31); 
    }
    .bot .po {
        display: inline-block;
        margin-top: 420px;
    }
    .bot .pt {
        display: inline-block;
        margin-top: 420px;
    }
    .four img {
        display: inline-block;
        padding-top: 10px;
        margin-left: 8px;
        height: 24px;
        width: 20px;
    }
    .four p {
        display: inline-block;
        vertical-align: top;
        color: #fff;
        width: 60px;
        height: 15px;
        font-size: 14px;
        padding-bottom: 10px;
        margin-left: 40px;
    }
    
    .op img {
        margin-bottom: 100px;
    }
    .explain { 
            height: 36px;
            background-color: #333;
            position: absolute;
            padding-bottom: 10px;
            padding-left: 120px;
            bottom: 0px;
            right: 0px;
            left: 0px;
        }
    .explain li {
            list-style-type: none;
            float: left;
            margin-right: 50px;
            margin-top: 0px;
        }
    .explain li a {
            text-decoration: none;
            color: #666;
            font-size: 14px;
            line-height: 36px;
            margin-top: 0px;
        }
    .explain ul a:hover {
            text-decoration: underline;
        }
</style>
<body>
        <div class="one">
            <img src="picture/tb.jpg" width="25px" height="25px">
        </div>
        <div class="two">Microsoft Bing</div>
        <div class="header">
            <ul>
                <li>
                    <a href="https://cn.bing.com/images/trending?form=Z9LH">图片</a>
                </li>
                <li>
                    <a href="https://cn.bing.com/videos/trending?form=Z9LH1">视频</a>
                </li>
                <li>
                    <a href="https://cn.bing.com/search?q=Bing+translate&FORM=TTAHP1">地图</a>
                </li>
                <li>
                    <a href="#">. . .</a>
                </li>
            </ul>
        </div>
        <div class="login">登录</div>
        <div class="icon">
            <img src="picture/tb3.jpg" width="30px" height="30px">
        </div>
        <div class="other">
            <img src="picture/tb1.jpg" width="20px" height="20px">
        </div>
        <div class="inland">国内版</div>
        <div class="inter">国际版</div>
        <div class="search">
            <img src="picture/ttb.jpg">
        </div>
        <div class="bot">
            <div class="four">
                <img src="picture/tbb.jpg">
                <p>落基山脉</p>
            </div>
            <div class="po">
                <img src="picture/q1.jpg" width="35px" height="35px">
            </div>
            <div class="pt">
                <img src="picture/q2.jpg" width="35px" height="35px">
            </div>
        </div>
        <footer>
            <div class="explain">
                <ul class="fr">
                    <li><a href="#">增值电信业务经营许可证：合字B2-20090007</a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#">京ICP备10036305号-7</a></li>
                    <li><a href="#">京公网安备11010802022657号</a></li>
                    <li><a href="#">隐私与Cookie</a></li>
                    <li><a href="#">法律声明</a></li>
                    <li><a href="#">帮助</a></li>
                </ul>
        </div>
        </footer>
        
</body>
</html>